<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view />
    </div>
  </a-config-provider>
</template>

<script>
import Vue from 'vue'
import { AppDeviceEnquire } from '@/utils/mixin'
import i18n from '@/locales'
import { mixin } from '@/store/i18n-mixin'

export default {
  mixins: [AppDeviceEnquire, mixin],
  data () {
    return {
      locale: {}
    }
  },
  watch: {
    currentLang (val) {
      this.locale = i18n.getLocaleMessage(val).antLocale
    }
  },
  created () {
    this.locale = i18n.getLocaleMessage(this.currentLang).antLocale
  }
}
</script>

<style lang="less">
@import '~ant-design-vue/lib/style/themes/default.less';
@import '~ant-design-vue/lib/style/color/colors';
html {
  overflow: hidden;
}
#app {
  height: 100%;
}

// delete btn in table
.link-danger {
  color: @error-color;
  &:hover {
    color: color(~`colorPalette('@{error-color}', 5) `);
  }
  &:focus {
    text-decoration: none;
  }
}

// 非树状结构的菜单，包含一些操作
.menu-actions-wrapper {
  .menu-actions {
    display: none;
    position: absolute;
    top: 50%;
    right: 0;
    width: 20px;
    height: 40px;
    line-height: 40px;
    transform: translateY(-50%);
    z-index: 1050;
  }
  &:hover {
    .menu-actions {
      display: inline-block;
    }
  }
}

// 横向滚动表格 滚动条异常
.ant-table .ant-table-scroll .ant-table-body {
  min-width: 0 !important;
  overflow: auto !important;
}

pre {
  position: relative;
  font-family: 'Roboto Mono', Monaco, courier, monospace;
  font-size: 0.85em;
  background-color: #f8f8f8;
  border-radius: 4px;

  code {
    overflow: auto;
    color: #525252;
    white-space: pre;
    padding: 1.2em 1.4em;
    font-size: 0.85rem;
    line-height: 1.6rem;
    display: block;
  }
}
</style>
